<template>
    <footer class="footer-box">
        <div class="comment-input" @click="display='block'">不想说点什么吗？</div>
        <div class="comment-detail" id="userCommentMb" @click="display='none'" :style="'display:'+display">
            <div class="user-input" @click.stop>
                <h4>头像</h4>
                <ul class="user-head" @click="userChoose($event)">
                    <li class="user-choose" data-img="user1.png" style="background-image: url(./imgs/users/user1.png)">
                    </li>
                    <li data-img="user2.png" style="background-image: url(./imgs/users/user2.png)"></li>
                    <li data-img="user3.png" style="background-image: url(./imgs/users/user3.png)"></li>
                    <li data-img="user4.png" style="background-image: url(./imgs/users/user4.png)"></li>
                    <li data-img="user5.png" style="background-image: url(./imgs/users/user5.png)"></li>
                    <li data-img="user6.png" style="background-image: url(./imgs/users/user6.png)"></li>
                    <li data-img="user7.png" style="background-image: url(./imgs/users/user7.png)"></li>
                    <li data-img="user8.png" style="background-image: url(./imgs/users/user8.png)"></li>
                    <li data-img="user9.png" style="background-image: url(./imgs/users/user9.png)"></li>
                    <li data-img="user10.png" style="background-image: url(./imgs/users/user10.png)"></li>
                    <li data-img="user11.png" style="background-image: url(./imgs/users/user11.png)"></li>
                    <li data-img="user12.png" style="background-image: url(./imgs/users/user12.png)"></li>
                    <li data-img="user13.png" style="background-image: url(./imgs/users/user13.png)"></li>
                    <li data-img="user14.png" style="background-image: url(./imgs/users/user14.png)"></li>
                    <li data-img="user15.png" style="background-image: url(./imgs/users/user15.png)"></li>
                    <li data-img="user16.png" style="background-image: url(./imgs/users/user16.png)"></li>
                    <li data-img="user17.png" style="background-image: url(./imgs/users/user17.png)"></li>
                    <li data-img="user18.png" style="background-image: url(./imgs/users/user18.png)"></li>
                    <li data-img="user19.png" style="background-image: url(./imgs/users/user19.png)"></li>
                    <li data-img="user20.png" style="background-image: url(./imgs/users/user20.png)"></li>
                    <li data-img="user21.png" style="background-image: url(./imgs/users/user21.png)"></li>
                    <li data-img="user22.png" style="background-image: url(./imgs/users/user22.png)"></li>
                    <li data-img="user23.png" style="background-image: url(./imgs/users/user23.png)"></li>
                    <li data-img="user24.png" style="background-image: url(./imgs/users/user24.png)"></li>
                </ul>
                <h4>昵称</h4>
                <input class="user-nikename" type="text" placeholder="昵称" v-model="nickName">
                <h4>评分</h4>
                <div class="film-source reset-star">
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img close"></span>
                    <span class="star-img close"></span>
                    <span class="star-source">7.9</span>
                </div>
                <h4>评论</h4>
                <textarea class="user-message" placeholder="留下点足迹..." v-model="message"></textarea>
                <div class="send-btn">
                    <span @click="display='none'">关闭</span>
                    <span>发送</span>
                </div>
            </div>
        </div>
    </footer>
</template>

<script>
    Vue.component("foot-box",{
        template: document.currentScript.ownerDocument.querySelector("template"),
        data() {
            return {
                display:"",
                nickName:"",
                message:""
            }
        },
        methods: {
            userChoose(e) {
                // console.log(e.target);      
                if (e.target.tagName == "LI") {
                    e.target.parentNode.querySelector(".user-choose").className = "";
                    e.target.className = "user-choose";
                    console.log(e.target);
                    console.log(e.target.style.backgroundImage);
                    
                }
            },
        },
    });
</script>